"クラスメソッドのReact事情大公開スペシャル#5"を開催しました!

"クラスメソッドのReact事情大公開スペシャル#5"を開催しました!

YouTubeLiveでの配信も始めました!アーカイブ動画はいつでもご覧になれます
Clock Icon2024.12.09

みなさんこんにちは、リテールアプリ共創部マッハチームのmorimorikochanです

11月22日にクラスメソッドのReact事情大公開スペシャル#5を大阪オフィス+オンラインで開催いたしました。
前回に引き続き開催レポートを残したいと思います。

イベント概要

イベント名 クラスメソッドのReact事情大公開スペシャル#5
日時 2024/11/22 19:00〜
場所 クラスメソッド大阪オフィス + YouTubeLiveによるオンライン配信
現地参加者 16名
オンライン参加者 61名

https://classmethod.connpass.com/event/333632/

5回目となる今回は、6名の方にご登壇いただき現地参加オンライン参加合わせて77名の方にご参加いただきました👏
初めてのオンライン開催のため、現地参加者が減りましたが、オンライン参加者が多く集まりとても楽しい会になりました

アーカイブ配信

https://www.youtube.com/watch/frV45xJfvAw

開催の様子

min.IMG_7893

min.IMG_7905

min.IMG_9554

min.IMG_7908
懇親会の様子

登壇内容

登壇内容を紹介していきます。

1. Reactのスタイリング手法についての考察

はじめに、"Michi"さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://www.youtube.com/watch/frV45xJfvAw?feature=shared&t=1118

スタイリングに何を使ってどう実装していくかは、WebのFEを構築する際に最も重要な領域だと思っています。
最新のスタイリング手法を追えているエンジニアは稀有だと思うので、こういう情報は本当に嬉しいですね

ヘッドレスUIエアプなんですが、聞いてて使ってみたくなりました。

2. React + Tauriでデスクトップアプリ開発に入門してみた

クラスメソッド株式会社AWS事業本部オペレーション部"西村祐二"さんに発表いただきました。

実際に作ったものが登壇中に動作していたので、イメージしやすかったです。
FE部分をReactで構築するパターンの他にも、Rustで構築するパターンもあるらしいです。修羅の道すぎる...

3. ツリーシェイキングと副作用

"sei"さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://www.youtube.com/live/frV45xJfvAw?feature=shared&t=3117

"ツリーシェイキング、なんとなく知ってるけどよくわからない"みたいな状態から抜け出すための一歩になる面白い発表だったと思います。
"sei"さん曰くここら辺の話はOSS開発では当たり前のこと、とのことでしたが、仕事では当たり前になっていないなーと痛感しました。また、実際に動作するデモがあり内容の難しさの割に理解しやすかったです。

4. Server Actionsを使ったこれからのフォーム

株式会社Gemcookの"KM"さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://www.youtube.com/live/frV45xJfvAw?feature=shared&t=4181

前回に引き続き、株式会社Gemcookさんのスライドがめちゃくちゃ綺麗でした💫
自分がどちゃくそ使ってるRHFとZodの組み合わせがServerActions以前のフォームとして挙げられていましたが、そろそろServerActionsを勉強しないといけないかなと思い始めました。

5. TanStack startが気になる!

株式会社Gemcookの"Atsuya"さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://www.youtube.com/live/frV45xJfvAw?feature=shared&t=5184

TanStack RouterやTanStack Queryの存在は知っていましたが、TanStack Startは全く聞いたことがなかったです。
まだベータ版ですが、TypeSafeRoutingやキャッシュなど色々な機能が盛り込まれているみたいです。

ぱっと見Next.jsとどのような差別化を図っているか気になりますね。"TanStack start"の公式サイトに星取表がありましたが、明らかにTanStack startが有利に見えていますがより詳しい検証が欲しくなりますね。

https://tanstack.com/router/latest/docs/framework/react/comparison

6. shadcn + valibotでお手"軽"フォームバリデーション実装

株式会社 鈴木商店の"わっち"さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://www.youtube.com/live/frV45xJfvAw?feature=shared&t=5937

validotはzodに比べて95%バンドルサイズが削減されているらしく、toC向けのReactアプリケーションを開発する環境では重宝されるのではないでしょうか

懇親会

登壇後に懇親会を開催しました。
今回もクロージングトークの中でLTの募集をさせていただいたのですが、ありがたいことに懇親会の場で数名の方から立候補いただきました。いつも本当にありがとうございます🙇‍♂️

今回からオンライン配信を行った影響か現地参加の方が少なくなったので少し寂しく感じました。
懇親会が本番だと思っているので、ぜひ来れる方は一度来てみてください!現地参加者が多かったら打ち上げ企画したいです🍻
という反面、YouTubeLiveで配信したおかげで遠方の方や当日予定があって参加できなかった方にもみていただけることになり良かったと感じています。(あまり感触はないですが...)

イベント運営側としては、もっと現地参加したくなるように頭捻っていきたいと思ってます💪

ハッシュタグ

今回もいくつか面白かったツイート貼っておきます

https://x.com/Ryuki_4648/status/1859905618494296065

https://x.com/ueno_k0108/status/1859906994267959716

https://x.com/NkEnuke/status/1859908237791031449

https://x.com/Michi_program/status/1859909466365608024

https://x.com/watt__007/status/1859912002082406608

https://x.com/ueno_k0108/status/1859915329331474905

https://x.com/ueno_k0108/status/1859921294046994669

https://x.com/tenmusu_007/status/1859939342707519558

所感

おかげさまで#5が無事に開催できました👏
運営をお手伝いいただいた皆様、登壇を承諾していただいた皆様ありがとうございました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.